<template>
    <div class="left-wrapper">
        <el-table :data="emails" ref="tableRef" row-key="id" @row-click="handleRowClick" :show-header="false"
            highlight-current-row class="list-wrapper">
            <el-table-column type="selection" width="55" />
            <el-table-column>
                <template #default="{ row }">
                    <div class="item">
                        <div class=" subject flex">
                            <span>{{ row.email.subject }}</span>
                            <dict-tag :options="email_read_status" :value="row.isRead" />
                        </div>
                        <div class="extra">
                            <el-text line-clamp="2">
                                {{ row.email.abstract }}
                            </el-text>
                        </div>
                        <div class="flex">
                            <el-text type="info">来自:{{ row.sender && row.sender.account }}</el-text>
                            <el-text type="info">{{ parseTime(row.reciveTime) }}</el-text>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { email_read_status } from "../status"
const currentEmail = ref();
const tableRef = ref();
const emits = defineEmits(["mailChange"])
const emails = defineModel({
    type: Array,
    default: []
})


/** 节点单击事件 */
const handleRowClick = (row) => {
    if (currentEmail.value && currentEmail.value.id == row.id) return;
    tableRef.value.toggleRowSelection(row)
    currentEmail.value = row;
    emits("mailChange", row.id);
};


const getSelectRows = () => {
    return tableRef.value.getSelectionRows();
}

defineExpose({ getSelectRows })

</script>

<style lang="scss" scoped>
.left-wrapper {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.list-wrapper {
    display: flex;
    gap: 12px;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;

    .item {
        flex: 1;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;

        .extra,
        .subject {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
        }

        .extra {
            text-indent: 2em;
        }

        .flex {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>